import React, { FC, memo, useEffect } from 'react'
import '@/assets/scss/Home.scss'

const Home: FC = () => {
  useEffect(() => {
    console.log('首页渲染')
  })

  const messageList: String[] = [
    '要几个人才能打扑克?',
    '多长时间才算标准?',
    '合格是否有好处?',
    '万一姿势不对怎么办?'
  ]

  return (
    <div className="app-container">
      <div className="top">
        <img src={require('@/assets/img/back.png')} alt="返回"></img>
        <h4>智能客服</h4>
      </div>
      <div className="body">
        <div className="ai-system">
          <div className="avatar">
            <img src={require('@/assets/img/customer-ai.png')}></img>
          </div>
          <div className="message">
            <div className="customer-name">
              <p>智能小彩</p>
            </div>
            <div className="ai-content">
              <div className="tips">Hi，欢迎使用XXAPP.请叫奴家小彩哦.</div>
              {messageList.map((item) => (
                <div className='issure'>{item}</div>
              ))}
              <div className='other-tips'>如果还有其它私密问题！请在下面描述出来哦！<br/>根据过往的经验,奴家也能回答君哦!</div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  )
}

export default memo(Home)
